<template>
  <div class="page-society">
	  <div class="society_1" v-for="item in list" :key="item._id" :style="icon1">
		  <div class="incton">
			  	<p>{{item.title}}</p>
				<p>{{item.title1}}</p>
				<p>{{item.title2}}</p>
		  </div>
		  <img :src="'./static/img/gh/' + item.img" alt="" >
	  </div>
	  <div class="society_2" >
		  <div class="society-1" :style="icon2">
			  	<div :style="icon" class="img1"></div>
				<ul class="conter-1" v-for="item in list1" :key="item._id">
					<li><h3>{{item.title}}</h3><p class="words">{{item.title1}}</p><p>{{item.title2}}</p><p>{{item.title3}}</p></li>
				</ul>
		  </div>
	  </div>
	  <div class="society_3" >
		  <div class="society-2" :style="icon3">
			  	<div :style="icon" class="img2"></div>
				<ul class="conter-2" v-for="item in list2" :key="item._id">
					<li><div :style="icon"></div><h3>{{item.title}}</h3></li>
				</ul>
		  </div>
	  </div>
	  <div class="society_4" >
		  <div class="society-3" :style="icon4" v-for="item in list3" :key="item._id">
			  <div :style="icon5"></div>
			  <P class="world">{{item.title}}</P>
			  <P>{{item.title1}}</P>
			  <a href="">{{item.title2}}</a>
			  <p class="world1">{{item.title3}}</p>
			  <p class="world1">{{item.title4}}</p>
		  </div>
	  </div>
  </div>
</template>
<style lang="less" scoped>
.page-society {
	width: 375px;
	overflow: hidden;
	.society_1{
		width: 1200px;
		height: 480px;
		background-repeat: no-repeat;
		background-image: linear-gradient(134deg,rgba(26,12,220,.85) 0,#9E009D 100%);
		background-position: 50% 50%;
		background-size:cover;
		text-align: center;
		padding: 40px 0;
		.incton {
			padding-top: 100px;
			font-size: 30px;
			color: rgba(255,255,255,.8);
			
		}
		img{
			width: 851px;
			height: 291px;
			display: block;
			// border: 1px solid #000;
			margin: 0 auto;
			padding: 30px 0;
		}
		
	}
	.society_2{
		width: 1200px;
		height: 612px;
		background-image: linear-gradient(37deg,#5102B0 6%,#1C4CDD 100%);
		.society-1{
			
			background-repeat: no-repeat;
			background-position: 50% 50%;
			position: relative;
		}
		
		.img1{
			height:80px;
			width: 510px;
			// margin: 0px auto;
			position: absolute;
			top: 80px;
			left: 50%;
			transform: translateX(-50%);
			// border: 1px solid #000;
			background: no-repeat 20px -57px;
		}
		.conter-1{
			width: 260px;
			height: 342px;
			float: left;
			// position: absolute;
			position: relative;
			text-align: center;
			margin: 0 20px;
			margin-top: 266px;
			li{
				width: 260px;
				height: 340px;
				// border: 1px solid #000;
				border-radius: 15px;
				background: rgba(255,255,255,.15);
				
				h3{
					color: #FFFFFF;
					font-size: 32px;
					font-weight: normal;
					padding-top: 65px;
				}
				h3::after {
					content: "";
					position: absolute;
					width: 30px;
					height: 6px;
					top: 130px;
					left: 130px;
					margin-left: -15px;
					border-radius: 6px;
					background-color: rgba(255,255,255,.4);
				}

				p{
					font-size: 21px;
					color: #ffffff;
					line-height: 32px;
				}
				.words{
					margin-top: 54px;
				}
			}
		}
	}
	.society_3{
		width: 1200px;
		height: 612px;
		background-image: linear-gradient(38deg,#870CBA 0,#5D22FB 100%);
		.society-2{
			position: relative;
			.img2{
				height:80px;
				width: 510px;
				margin: 0px auto;
				position: absolute;
				top: 110px;
				left: 50%;
				transform: translateX(-50%);
				// border: 1px solid #000;
				background: no-repeat 20px -126px;
			}
			.conter-2{
				width: 260px;
				height: 205px;
				// border: 1px solid #000;
				float: left;
			// position: absolute;
				position: relative;
				text-align: center;
				margin: 0 20px;
				margin-top: 320px;
				div{
					width: 110px;
					height: 110px;
					// border: 1px solid #000;
					background: no-repeat -240px -259px;
					margin: 0px auto;
				}
				h3{
					font-size: 30px;
					color: #ffffff;
					font-weight: normal;
					margin-top: 55px;
				}
			}
			
		}
	}
	.society_4{
		width: 1200px;
		height: 612px;
		background-image: linear-gradient(43deg,#FFB721 0,#FF6D2B 100%);
		.society-3{
			position: relative;
			text-align: center;
			font-size: 30px;
			div{
				height:80px;
				width: 240px;
				margin: 0px auto;
				position: absolute;
				top: 95px;
				left: 50%;
				transform: translateX(-50%);
				border: 1px solid #000;
				background: no-repeat ;
			}
			p{
    			color: rgba(255,255,255,.9);
			}
			.world{
				padding-top:270px;
			}
			a{
				text-decoration: none;
				display: block;
				width: 330px;
				height: 70px;
				line-height: 70px;
				border-radius: 40px;
				background-color: #f05549;
				text-align: center;
				color: #fff;
				margin: 40px auto;
			}
			.world1{
				font-size: 20px;
			}
			
		}
	}
	
}

</style>
<script>
export default {
	data() {
		return {
			icon: {
					 backgroundImage:'url(' + require('../../public/static/img/gh/sprite_union.png') + ')'
				 },
			list: [
				{id:0, title:'全民K歌是腾讯音乐娱乐集团旗下一款基于娱乐社交的App，', title1:'目前全民K歌已成为中国优质的集K歌、直播、泛娱乐于一体的平台级产品，',
				 title2:'累计注册用户超过8亿，市场占有率长年稳居行业前列。', img:'union_count.png',
				 icon1: {
					 backgroundImage:'url(' + require('../../public/static/img/gh/union_01.png') + ')'
				 }}
			],
			list1: [
				{id:0, title:'流量扶持', title1:'全名K歌及腾讯音乐集团', title2:'体系亿级流量扶持',title3:''},
				{id:1, title:'政策扶持', title1:'全名K歌为公会提供', title2:'多元化内容合作及',title3:'政策扶持方案'},
				{id:2, title:'渠道扶持', title1:'头级合作公会可获得更多', title2:'渠道层面扶持，包括内容',title3:'包装、IP孵化、商业合作等'},
				{id:3, title:'发展合作', title1:'可优先获得腾讯音乐集团', title2:'其他发展合作机会',title3:''},
			],
			icon2: {
					 backgroundImage:'url(' + require('../../public/static/img/gh/union_02.png') + ')'
				 },
			list2: [
				{id:0, title:'公会合作'},
				{id:1, title:'KOL孵化'},
				{id:2, title:'MCN内容合作'},
				{id:3, title:'广告商业化合作'},
			],
			icon3: {
					 backgroundImage:'url(' + require('../../public/static/img/gh/union_03.png') + ')'
				 },
			list3: [
				{id:0, title:'申请入驻必须登录K歌账号，且该账号在K歌内部建立独立家族', 
				title1:'K歌平台将对公会提交的有关信息和材料进行核实，入驻意见将于5个工作日联络通知', title2:'申请入驻',
				title3:'打开全民K歌之后依次点击【消息】-【家族】-【创建家族】，需开通VIP权限', title4:'更多详情可咨询QQ群：822506205'},
			],
			icon4: {
					 backgroundImage:'url(' + require('../../public/static/img/gh/union_04.png') + ')'
				 },
			icon5: {
					 backgroundImage:'url(' + require('../../public/static/img/gh/sq.png') + ')'
				 },

		}
	}
}
	
</script>